<template>
  <div class="supply-list-content pb-50px">
    <div class="filters">
      <RadioFilter
          v-model="formData[isSupply ? 'supplyType' : 'demandType']"
          label="资源类型"
          :list="supplyTypeList"
          @change="handleTypeChange"
      />
      <template v-if="props.type === 'supply'">
        <RadioFilter
            v-show="formData.supplyType === 1"
            v-model="formData.framePowerWay"
            label="供电方式"
            :list="framePowerWayOptions"
            style="flex-wrap: wrap;"
        />
        <RadioFilter
            v-show="formData.supplyType === 2"
            v-model="formData.bwOperator"
            label="运营商"
            :list="bwOperatorOptions"
            style="flex-wrap: wrap;"
        />
        <RadioFilter
            v-show="formData.supplyType === 2"
            v-model="formData.bwRouteType"
            label="路由类型"
            :list="bwRouteTypeOptions"
            style="flex-wrap: wrap;"
        />
        <RadioFilter
            v-show="formData.supplyType === 4"
            v-model="formData.gpuResource"
            label="计算资源"
            :list="gpuResourceOptions"
            style="flex-wrap: wrap;"
        />
        <RadioFilter
            v-show="formData.supplyType === 4"
            v-model="formData.gpuType"
            label="卡类型"
            :list="gpuTypeOptions"
            style="flex-wrap: wrap;"
        />
        <RadioFilter
            v-show="formData.supplyType === 5"
            v-model="formData.brandName"
            label="硬件品牌"
            :list="brandOptions"
            style="flex-wrap: wrap;"
        />
        <RadioFilter
            v-show="formData.supplyType === 5"
            v-model="formData.modelName"
            label="硬件型号"
            :list="modelOptions"
            style="flex-wrap: wrap;"
        />
      </template>
      <RadioFilter
          class="city-filter"
          v-model="formData.cityName"
          label="区域"
          :list="cityNameOptions"
          style="flex-wrap: wrap;"
      />

      <!-- <DateFilter v-if="!isSupply" v-model="range" label="需求时间" /> -->
    </div>
    <div class="cards flex flex-wrap mt-32px mb-8px" v-loading="loading">
      <component
          :is="isSupply ? SupplyCard : DemandCard"
          v-for="card in list"
          :key="card.id"
          :data="card"
      />
      <Empty v-if="!list.length" />
    </div>
    <el-pagination
        class="justify-end"
        :total="total"
        layout="total, sizes, prev, pager, next"
        v-model:current-page="page.pageNum"
        v-model:page-size="page.pageSize"
        :page-sizes="[15, 30, 60, 120]"
    ></el-pagination>
  </div>
</template>

<script setup>
import { enum2List } from "@/utils";
import { SOURCE_TYPE_ENUM, DICT_MAP } from "@/const";
import { useDict, usePage, useLoading } from "@/hooks";
import SupplyCard from "./supplyCard.vue";
import DemandCard from "./demandCard.vue";

const supplyFilterKeys = [
  "framePowerWay",
  "bwOperator",
  "bwRouteType",
  "gpuResource",
  "gpuType",
  "brandName",
  "modelName",
];

const $api = inject("$api");

const props = defineProps({
  type: String,
});

const isSupply = computed(() => props.type === "supply");

const supplyTypeList = enum2List(SOURCE_TYPE_ENUM, true);
// 供电方式
const { list: framePowerWayOptions } = useDict(DICT_MAP.power_way);
// 运营商
const { list: bwOperatorOptions } = useDict(DICT_MAP.operator);
// 路由类型
const { list: bwRouteTypeOptions } = useDict(DICT_MAP.route_type);
// 计算资源字典
const { list: gpuResourceOptions } = useDict(DICT_MAP.gpu_resource_type);
// 卡类型字典
const { list: gpuTypeOptions } = useDict(DICT_MAP.supply_gpu_type);
const { list: brandOptions } = useDict(DICT_MAP.goods_brand_name);
const { list: modelOptions } = useDict(DICT_MAP.goods_model_name);

// 城市字典
const cityNameOptions = ref([]);

// 获取城市信息
const fetchCityOptions = async () => {
  try {
    const { data } = props.type === "supply"
        ? await $api.supply.getSupplyCityList()
        : await $api.supply.getDemandCityList();

    // 过滤无效的城市名称
    const validCities = data.filter(city => city && isNaN(city));

    cityNameOptions.value = validCities.map(city => ({ label: city, value: city }));
  } catch (error) {
    console.error("Failed to fetch city options:", error);
  }
};


const formData = ref({});
// 需求时间，变化后去更新formData
const range = ref([]);

const handleTypeChange = () => {
  supplyFilterKeys.forEach((key) => {
    formData.value[key] = "";
  });
};

const list = ref([]);
const { page, total, resetPage } = usePage(15);
const { loading, setLoading } = useLoading();

const queryList = async () => {
  setLoading(true);
  try {
    const apiName = props.type === "demand" ? "getDemandList" : "getSupplyList";
    const { data: rows, total: resTotal } = await $api.supply[apiName]({
      ...formData.value,
      ...page.value,
      status: 1,
    });
    total.value = resTotal;
    list.value = rows;
  } finally {
    setLoading(false);
  }
};

// 获取城市列表
onMounted(() => {
  fetchCityOptions();
});

watch(
    () => formData.value,
    () => {
      resetPage();
    },
    {
      deep: true,
    }
);
watch(
    () => page.value,
    () => {
      queryList(true);
    },
    {
      deep: true,
      immediate: true,
    }
);
</script>

<style scoped>
.city-filter .item {
  margin: 10px 0;
}
</style>

